iT邦幫忙

2023 iThome 鐵人賽

DAY 2
0

剛開始看書學js的時候,遇到的第一個坑就是各種隱含轉型的方法,完全是眼花撩亂,而時至今日,重新看了之前的書,覺得應該不是我的問題,發現自己對於瑣碎的訊息真的接受度不佳(誰佳阿XD),那麼就用自己的方式來整理一下。

某某型別語言

轉型分為強制轉型及自動轉型兩種方式,最大的差別是一個是有特定語法去做轉型這件事,是明確依循你的意願而作的;另一個是在某些特定的場景中,js自動地幫你做了這件事,不管你到底想不想要。

有關js會貼心幫忙轉型這件事,大多看到的說法是說js是一個弱型別(weakly typed)的程式語言,但幾個參考資料都不建議使用強弱型別來解釋這件事,原因是其實"強弱型別"其實並沒有一個很明確的定義,在使用上常會造成誤會與各自解讀的空間。

另一個比較有明確定義的分類是dynamic typing 與 static typing。需注意的是這和強弱型別很容易混淆,但不要輕易講強弱型別就沒事。

像js是動態型別(dynamic typing),對js而言,變數就像一個盒子,可以把各種型別的值存在裡面,也就是說,所謂的型別,指的是值,而非變數。
所以我可以先把一個字串放進盒子內,過一陣子在改放一個布林值進去同一個盒子,同一個盒子,只是內容物不同。

而相反地,靜態型別在宣告時就必須為變數指定型別,後面也無法做變更,於是這裡的型別,指的是變數。如果你把字串放進一個裝數字的變數是會報錯的。

以下用表格整理會更簡潔點:

動態型別 靜態型別
型別指的是誰 變數
何時確認型別 run-time compile-time

Reference

自動轉型

強制轉型就不多說了,直接加上String(), Number(), Boolean()就可以做到,明白又清楚。
自動轉型的話,簡單整理幾個原則如下,然後同場加映各種資料轉成特定型別的結果:

  • 有字串和運算子"+":會轉字串
//例子
console.log(12 + 8 + "8");        //'208'
console.log(null + "!");          //'null!'
//同場加映(以下例子沒什麼特別的,就大家都變字串這樣)
console.log(String(undefined));  //'undefined'
console.log(String(NaN));        //'NaN'
console.log(String(null));       //'null'
console.log(String(0));          //'0'
console.log(String(false));      //'false'
  • 有運算子:會轉數字
//例子
console.log("8" - "2" - null);  //等同8-2-0=6
console.log(8 - undefined);     //等同8-NaN=NaN, NaN與任何值運算皆為NaN
//同場加映
console.log(Number(undefined));   //NaN
console.log(Number(NaN));         //NaN
console.log(Number(null));        //0
console.log(Number(false));       //0
console.log(Number(true));        //1
console.log(Number(""));          //0
console.log(Number("0"));         //0
console.log(Number("112"));       //112
console.log(Number("0s"));       //NaM
  • 放在if判斷式裡面或與邏輯運算子一起:會轉布林值
    除了falsy value(包含空字串,0,null,undefined,NaN,false)會轉false,其他的都轉成true。
//例子:input%2===0為偶數,但放在if()裡面會變false,故加上!
const isEven = function (input) {
  if (!(input % 2)) {
    console.log("This is an even");
  } else {
    console.log("This is an odd");
  }
};

大概降,簡單吧~

今日結論

其實搞清楚之後,發現其實也沒什麼大不了的大道理;很多時候,嚇著自己的,都是自己對未知的想像罷了,共勉之。


上一篇
超低腦容量的人怎麼生存?
下一篇
兩種函式宣告的方法:function declaration & function expression (看起來都一樣阿~~)
系列文
超低腦容量學習法遇到javascript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言